<script setup lang="ts">
import type { RouteDetail } from '@/types/template'
import type { Enroll } from '@/types/enroll'
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getRouteGetApi } from '@/services/template'
import { postEnrollAddApi } from '@/services/enroll'
import PopupRouteInfo from './components/PopupRouteInfo.vue'
import { useVisitorStore } from '@/stores/modules/visitor'
import { sexDesc, visitorTypeDesc } from '@/utils/common'

//接收页面参数
const props = defineProps<{ id: number; adultNum: number; childNum: number }>()

// 获取发班线路
const route = ref<RouteDetail>()
const getRouteGetData = async () => {
  const res = await getRouteGetApi(props.id)
  route.value = res.data
  form.value.single_price = num.value % 2 == 1 ? route.value.single_price : 0
}

//人数
const num = computed(() => {
  return props.adultNum * 1 + props.childNum * 1
})

// 确认订单
const onNext = async () => {
  try {
    await formRef.value?.validate?.()
    if (selecteVisitor.value.length == 0) {
      uni.showToast({ icon: 'error', title: '请选择的出游人' })
      return
    }
    if (selecteVisitor.value.length != num.value) {
      uni.showToast({ icon: 'error', title: '选择的出游人与下单人数必须一致' })
      return
    }
    form.value.visitor_ids = selecteVisitor.value.map((it) => it.id).join(',')
    const res = await postEnrollAddApi(form.value)
    uni.navigateTo({ url: `/pages/enroll/detail?id=${res.data.id}` })
  } catch (error) {
    console.log(error)
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}

// 选择出游人
const jumpVisitor = () => {
  uni.navigateTo({ url: `/pages/visitor/list?num=${num.value}` })
}

// 显示协议
const gotoProtocal = () => {
  uni.navigateTo({ url: `/pages/web/web` })
}

// 页面加载
onLoad(async () => {
  form.value.route_id = props.id
  form.value.adult_num = props.adultNum
  form.value.child_num = props.childNum
  getRouteGetData()
})

const visitorStore = useVisitorStore()
// 出游人
const selecteVisitor = computed(() => {
  return visitorStore.visitors
})

// 表单数据
const form = ref<Enroll>({
  id: 0,
  route_id: 0,
  adult_num: 0,
  child_num: 0,
  market_money: 0,
  linkman: '',
  mobile: '',
  email: '',
})

// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  linkman: {
    rules: [{ required: true, errorMessage: '请填写联系人姓名' }],
  },
  mobile: {
    rules: [
      { required: true, errorMessage: '请填写联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
}

// 表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()
</script>

<template>
  <view class="route-info">
    <view class="name line">
      <up-image :src="route?.pic" radius="5" width="140rpx" height="140rpx"></up-image>
      <view>{{ route?.name }}</view>
    </view>
    <view class="sub-title">出游时间/数量</view>
    <view class="date-num line">
      <view class="date">{{ route?.start }}</view>
      <view class="person-num">
        <text>{{ adultNum }}</text>
        人
        <template v-if="childNum > 0">
          <text>{{ childNum }}</text>
          儿童
        </template>
      </view>
    </view>
    <view class="tips">
      <view class="hx-font hx-idea"></view>
      <view>最少一人起订，儿童标准：2-12岁，儿童入住需遵循酒店的儿童政策。</view>
    </view>

    <view class="title line">
      <view>出游人</view>
      <view>需要{{ num }}位信息</view>
    </view>
    <view class="visitor line" v-for="it in selecteVisitor" :key="it.id">
      <view class="u-flex">
        <view class="left">{{ it.name }}</view>
        <view>{{ sexDesc(it.sex) }}</view>
      </view>
      <view class="u-flex">
        <view class="left">{{ visitorTypeDesc(it.type) }}</view>
        <view>{{ it.credentials }}</view>
      </view>
    </view>
    <view class="choose-visitor-box">
      <view @click="jumpVisitor()">选择出游人</view>
    </view>
    <view class="tips">
      <view class="hx-font hx-question"></view>
      <view>为了您顺利出行，请务必保证填写与出游人所持证件保持一致。</view>
    </view>

    <view class="title line"><view>联系人信息</view></view>
    <uni-forms ref="formRef" :rules="rules" :modelValue="form">
      <uni-forms-item name="linkman" label="姓名">
        <uni-easyinput v-model="form.linkman" placeholder="请填写联系人姓名" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="mobile" label="手机号码">
        <uni-easyinput
          v-model="form.mobile"
          placeholder="请填写联系人手机号码"
          :clearable="false"
        />
      </uni-forms-item>
      <uni-forms-item name="email" label="电子邮箱">
        <uni-easyinput v-model="form.email" placeholder="非必填" :clearable="false" />
      </uni-forms-item>
    </uni-forms>

    <view class="tips">
      <view class="hx-font hx-dot"></view>
      <view>签约成功后，如需取消、更改、退订，将按照您所订资源的退变条款收取费用。</view>
    </view>
    <view class="tips">
      <view class="hx-font hx-dot"></view>
      <view>订单已经提交，如机票或酒店无位，我们将联系您更改订单。</view>
    </view>
    <view class="tips">
      <view class="hx-font hx-dot"></view>
      <view>
        点击确认行程表示已阅读并同意<text class="link" @click="gotoProtocal()"
          >预定须知和重要条款</text
        >。
      </view>
    </view>
    <up-gap height="80"></up-gap>
  </view>

  <PopupRouteInfo
    :currentRoute="route"
    :adultNum="adultNum"
    :childNum="childNum"
    btnText="确认订单"
    @next="onNext()"
  ></PopupRouteInfo>
</template>

<style lang="scss" scoped>
.route-info {
  padding: 32rpx;
  .name {
    display: flex;
    view {
      margin-left: 32rpx;
      font-size: $fs-xl;
      font-weight: bold;
      color: $u-main-color;
    }
  }
  .line {
    padding-bottom: 32rpx;
    margin-bottom: 32rpx;
    border-bottom: 1px solid $u-border-color;
  }
  .sub-title {
    font-size: $fs-lg;
    color: $u-content-color;
  }
  .date-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 0;
    .date {
      font-size: $fs-xl;
      color: $u-main-color;
    }
    .person-num {
      font-size: $fs-md;
      text {
        font-size: $fs-xl;
        font-weight: bold;
      }
    }
  }
  .tips {
    display: flex;
    font-size: $fs-sm;
    color: $u-tips-color;

    .hx-font {
      margin-right: 8rpx;
    }
    .hx-idea {
      background-color: $c-main;
      color: #fff;
      border-radius: 50%;
      height: 1em;
    }
    .hx-question {
      color: skyblue;
      background-color: #fff;
    }
    .link {
      color: $c-main;
      text-decoration: underline;
    }
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $fs-xl;
    margin-top: 32rpx;
  }
  .visitor {
    font-size: $fs-sm;
    color: $u-content-color;
    line-height: 1.6em;
    .left {
      margin-left: 20px;
      width: 50px;
    }
  }
  .choose-visitor-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 16px;
    view {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160px;
      font-size: $fs-lg;
      color: $c-main;
      border: 1px solid $c-main;
      line-height: 36px;
      border-radius: 18px;
    }
  }
}
</style>
